<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <div class="header-box">
      <header>
        <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
        <p>注册</p>
        <i></i>
      </header>
      <div class="top-ban"></div>
      <img src="../assets/header.png">
    </div>

    <table class="table-form">
      <tr>
        <td>手机号码</td>
        <td><input type="text" placeholder="请输入手机号码" v-model="supervisorForm.telId" @blur="isExist"></td>
      </tr>
      <tr>
        <td>邮箱</td>
        <td><input type="text" placeholder="请输入邮箱" v-model="supervisorForm.email"></td>
      </tr>
      <tr>
        <td>真实姓名</td>
        <td><input type="text" placeholder="真实姓名便于我们联系您" v-model="supervisorForm.realName"></td>
      </tr>
      <tr>
        <td>出生日期</td>
        <td><input type="date" placeholder="出生日期" v-model="supervisorForm.birthday"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" v-model="supervisorForm.sex" :value=1>男
          <input type="radio" v-model="supervisorForm.sex" :value=0>女
        </td>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="password" placeholder="请输入密码" v-model="supervisorForm.password"></td>
      </tr>
      <tr>
        <td>确认密码</td>
        <td><input type="password" placeholder="请再次输入密码" v-model="supervisorForm.confirmPassword"></td>
      </tr>
      <tr>
        <td @click="getCaptcha">获取验证码</td>
        <td><input type="tel" placeholder="请输入验证码" v-model="captcha" >
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="btn" @click="register" >注册</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import router from "@/router";
import 'element-plus/dist/index.css'
import { ElMessage } from "element-plus";
import {getSupervisorById, saveSupervisor,getCaptchaApi,checkCaptchaApi} from "@/axios/api/OthersApi";
const supervisorForm = reactive({
  telId: '',
  email:'',
  realName: '',
  birthday: '',
  sex: 1,
  password: '',
  confirmPassword: ''
});
const captcha=ref('')
//检测手机号是否已经被注册
const isExist = () => {
  if (supervisorForm.telId === '') {
    ElMessage.warning("电话号码不能为空")
    return;
  }
  if (supervisorForm.email === '') {
    ElMessage.warning("邮箱不能为空")
    return;
  }
  var uPatternPhone = /^1[3456789]\d{9}$/;
  if (!uPatternPhone.test(supervisorForm.telId)) {
    console.log(supervisorForm.telId);
    ElMessage.error("电话号码格式不正确")
    return;
  }

  getSupervisorById({ telId: supervisorForm.telId })
      .then((response) => {
        if (response.code !== 200) {
          supervisorForm.telId = '';
        }
      }).catch((err)=>supervisorForm.telId = '')
}
const getCaptcha = () => {
  if(!checkForm()) return;
  getCaptchaApi({'email':supervisorForm.email}).catch((err)=>console.log(err))
}
const checkForm = () => {
  console.log(supervisorForm.sex)
  //表单验证
  //验证电话号格式
  if (supervisorForm.telId == '') {
    ElMessage.error("电话号码不能为空");
    return false;
  }
  var uPatternPhone = /^1[3456789]\d{9}$/;
  if (!uPatternPhone.test(supervisorForm.telId)) {
    console.log(supervisorForm.telId);
    ElMessage.error("电话号码格式不正确");
    return false;
  }
  if (supervisorForm.email === '') {
    ElMessage.warning("邮箱不能为空")
    return false;
  }
    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if(!reg.test(supervisorForm.email)){
      ElMessage.error("邮箱格式不正确");
      return false;
    }
  //真是姓名验证
  if (supervisorForm.realName == "") {
    ElMessage.error("真实姓名不能为空！");
    return false;
  }
  //验证密码
  if (supervisorForm.password == '') {
    ElMessage.error("密码不能为空");
    return false;
  }
  let uPatternPwd = /^[A-Za-z0-9]{6,12}$/;
  if (!uPatternPwd.test(supervisorForm.password)) {
    ElMessage.error("密码格式不正确");
    return false;
  }
  //验证两次输入的密码是否相同
  if (supervisorForm.password != supervisorForm.confirmPassword) {
    ElMessage.error("两次密码输入不一致！");
    return false;
  }
  return true;
}
//注册
const register = () => {
  if(!checkForm()) return;
  const params={
    'email':supervisorForm.email,
    'captcha':captcha.value
  }
  checkCaptchaApi(params)
      .then(()=>{
            //提交数据
            saveSupervisor(supervisorForm)
                .then((response)=>{
                  /*if(response.code!==200){
                    return ;
                  }*/
                  router.push('/login');
                })
          }
      ).catch((err)=>console.log(err))
}
</script>
<style>
</style>